import React, { Component } from 'react'

export default class Calculate extends Component {
    constructor(props){
        super(props)
        this.state={
            a:0,b:0,c:0,type:'+'
        }
    }

    _aChange=event=>{
        this.setState({a:event.target.value})
    }
    _bChange=event=>{
        this.setState({b:event.target.value})
    }
    _typeChange=event=>{
        let type=event.target.value
        this.setState({type})
    }
    _calculate=()=>{
        let a=Number.parseFloat(this.state.a)
        let b=Number.parseFloat(this.state.b)
        let c=0
        switch(this.state.type){
            case '+':
                c=a+b
                break;
            case '-':
                c=a-b
                break;
            case '*':
                c=a*b
                break;
            case '/':
                c=a/b
                break;
            
        }
        this.setState({c})
            
    }
    _calculatePlus=()=>{
        let c=eval(this.state.a+this.state.type+this.state.b)
        this.setState({c})
    }

    _changePro=event=>{
        let name=event.target.getAttribute('name')
        this.setState({[name]:event.target.value})
    }
    render() {
        return (
            <div>
                <input name="a" type="number" onChange={this._changePro} value={this.state.a}/>
                <select value="type" value={this.state.type} onChange={this._changePro}>
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                    <option value="%">%</option>
                </select>
                <input name="b" type="number" onChange={this._changePro} value={this.state.b}/>
                =
                <span>{this.state.c}</span>
                <button onClick={this._calculatePlus}>计算</button>
            </div>
        )
    }

}